<template>
  <div>
    <el-container class="total" >
      <el-header height='70px'>
        <Header/>
      </el-header>
      <el-container>
        <el-aside>
          <AsideNav />
        </el-aside>
        <el-main>
          <!-- 路由视图 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import AsideNav from "@/components/AsideNav";
import Header from "@/components/Header";
export default {
  name: "HomePage",
  components: {
    AsideNav,
    Header
  },
};
</script>

<style scoped>
.total{
  width:100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}
.el-header {
  padding: 0;
  background-color: #F0FFFF;
  color: #B7CCAF;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  padding-top: 12px;
  background-color: #faead3;
  line-height: 200px;
  width: 240px !important;
}

.el-main {
  background-color: #B2FFE2;
  text-align: center;
  padding: 0px !important;
  width: 100%;
  height: 100%;
}
.el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
  margin: 50px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, .2);
}
</style>